<template>
	<view>
		<commonList :item="info" isDetail @doShare="doShare" @doComment="doComment" @follow="follow"
			@dosupport="dosupport">
			<view class="my-2">
				{{info.content}}
			</view>
			<view v-for="(item,index) in images">
				<image :src="item.url" class="w-100" @click="preview(index)" mode="widthFix"></image>
			</view>
		</commonList>
		<!-- 占位 -->
		<view style="height: 100rpx;"></view>
		<divider></divider>
		<view class="p-2 font-md font-weight-bold">
			最新评论 {{commonList.length}}
		</view>
		<view class="px-2">
			<view class="uni-comment-list" v-for="(item,index) in commonList" :key="item.id">
				<view v-if="item.fid > 0" class="" style="width: 60rpx;"></view>
				<view class="flex w-100" :class="item.fid > 0 ? 'bg-light rounded p-2' : ''">
					<view class="uni-comment-face">
						<image :src="item.userpic" mode="widthFix"></image>
					</view>
					<view class="uni-comment-body">
						<view class="uni-comment-top">
							<text>{{item.username}}</text>
						</view>
						<view class="uni-comment-content" @click="reply(item.id)">{{item.data}}</view>
						<view class="uni-comment-date">
							<view>{{item.time}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view style="height: 100rpx;"></view>
		<!-- 底部文本框 -->
		<bottomBtn @submit="submit" :focus="focus" @blur="blur"></bottomBtn>
		<!-- 弹出层 -->
		<moreShare ref="share"></moreShare>
	</view>
</template>

<script>
	import commonList from '@/components/common/common-list.vue'
	import bottomBtn from '@/components/common/bottom-btn.vue'
	import moreShare from '@/components/common/more-share.vue'
	import $T from '@/common/time.js'
	export default {
		components: {
			commonList,
			bottomBtn,
			moreShare
		},
		data() {
			return {
				info: {
					id: 1,
					user_id: 0,
					username: "",
					userpic: "",
					newstime: "",
					isFollow: false, //是否关注
					title: "",
					titlepic: "",
					content: "",
					//点赞和踩
					support: {
						type: "unsupport",
						support_count: 0,
						unsupport_count: 0
					},
					comment_count: 0,
					share_num: 0
				},
				images: [],
				commonList: [],
				//评论id
				reply_id:0,
				//获取焦点弹出键盘
				focus:false
			}
		},
		onLoad(e) {
			this.__init(JSON.parse(e.detail))
			uni.$on('updateFolloworSurpport', (e) => {
				switch (e.type) {
					case 'follow':
						this.follow(e.user_id)
						break;
					case 'support':
						this.dosupport(e.data)
						break;
					default:
						break;
				}
			})
		},
		onUnload() {
			uni.$off('updateFolloworSurpport', (e) => {})
		},
		onNavigationBarButtonTap() {
			this.$refs.share.open({
				title: this.info.title,
				shareText: this.info.title,
				href: "https://uniapp.dcloud.io",
				image: this.info.titlepic,
			})
		},
		onBackPress() {
			this.$refs.share.close()
		},
		 onShareAppMessage(res) {
		    return {
		      title: this.info.title,
		      path: "/pages/detail/detail?detail="+JSON.stringify(this.info)
		    }
		  },
		computed: {
			//查看图片数组
			imagesList() {
				return this.images.map(item => item.url)
			}
		},
		methods: {
			//获取标题
			__init(data) {
				uni.setNavigationBarTitle({
					title: data.title
				})
				this.info = data
				this.info.content = ''
				this.images = []
				this.$H.get('/post/' + this.info.id).then(res => {
					this.images = res.detail.images
				})
				this.getCommonCounts()
			},
			//关注
			follow() {
				this.info.isFollow = true
				uni.showToast({
					title: '关注成功',
					icon: 'none'
				});
			},
			//顶踩
			dosupport(e) {
				if (this.info.support.type === e.type) {
					return uni.showToast({
						title: '您已操作过了哦!',
						icon: 'none'
					});
				}
				const isType = this.info.support.type
				if (isType === '') {
					this.info.support.type = e.type
					this.info.support[e.type + '_count']++
				} else if (isType === 'support' && e.type === 'unsupport') {
					this.info.support.support_count--
					this.info.support.unsupport_count++
				} else if (isType === 'unsupport' && e.type === 'support') {
					this.info.support.unsupport_count--
					this.info.support.support_count++
				}
				this.info.support.type = e.type
			},
			//评论
			doComment() {
				this.focus = true
			},
			//分享
			doShare() {
				this.$refs.share.open({
					title: this.info.title,
					shareText: this.info.title,
					href:"http://www.dishaxy.com",
					image: this.info.titlepic
				})
			},
			//查看图片
			preview(index) {
				uni.previewImage({
					current: index,
					urls: this.imagesList,
				});
			},
			//获取评论
			getCommonCounts() {
				this.$H.get('/post/' + this.info.id + '/comment').then(res => {
					this.commonList = this.__ArrSort(res.list)
					this.info.comment_count = this.commonList.length
					uni.$emit('updatecommoncount',{
						id:this.info.id,
						count:this.info.comment_count
					})
				})
			},
			// 重新整理评论格式
			__ArrSort(arr, id = 0) {
				var temp = [],
					lev = 0;
				var forFn = function(arr, id, lev) {
					for (var i = 0; i < arr.length; i++) {
						var item = arr[i];
						if (item.fid == id) {
							item.lev = lev;
							temp.push({
								id: item.id,
								fid: item.fid,
								userid: item.user.id,
								userpic: item.user.userpic,
								username: item.user.username,
								time: $T.gettime(item.create_time),
								data: item.data,
							});
							forFn(arr, item.id, lev + 1);
						}
					}
				};
				forFn(arr, id, lev);
				return temp;
			},
			//回复评论
			reply(id){
				this.reply_id = id
				this.focus = true
			},
			//失去焦点关闭键盘
			blur(){
				this.focus = false
			},
			//发送消息
			submit(data) {
				if (data === '') {
					return uni.showToast({
						title: '评论不能为空',
						icon: 'none'
					});
				}
				uni.showLoading({
					title: '评论中',
					mask: false
				});
				let obj =  {
					fid: this.reply_id,
					data: data,
					post_id: this.info.id
				}
				this.$H.post('/post/comment',obj, {
					token: true
				}).then(res => {
					uni.hideLoading()
					this.getCommonCounts()
					this.reply_id = 0
				}).catch(err => {
					uni.hideLoading()
				})
			},
			
		}
	}
</script>

<style>

</style>
